<template>
    <el-container class="cantainer-box">
        <el-header>
            <el-button type="primary" @click="refreshList">查询</el-button>
        </el-header>
        <el-main>

            <el-dialog v-model="dialogFormVisible" title="菜单" width="400">
                <el-form :model="userData.myUserForm">
                    <el-form-item label="账号" label-width="100px">
                        <el-input v-model="userData.myUserForm.username" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="密码" label-width="100px">
                        <el-input v-model="userData.myUserForm.password" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="类型" label-width="100px">
                        <el-select v-model="userData.myUserForm.type" placeholder="请选择">
                            <el-option v-for="item in baseTypeData.arrayData" :key="item.type" :value="item.type" :label="item.typeName"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取消</el-button>
                    <el-button type="primary" @click="sureSubmitUser">确定</el-button>
                </div>
                </template>
            </el-dialog>
            <div>
                <el-button type="primary" @click="addUser">添加</el-button>
            </div>

            <el-table :data="tableState.pageData.records" style="width: 100%">
                <el-table-column fixed="left" label="操作" min-width="100" v-slot="scope">
                    <el-button link type="primary" size="small" @click="editUser(scope.row)">编辑</el-button>
                    <el-button link type="primary" size="small" @click="deleteUser(scope.row.id)">删除</el-button>
                </el-table-column>
                
                <el-table-column prop="username" label="用户名" min-width="100"></el-table-column>
                <el-table-column prop="password" label="密码" min-width="180"></el-table-column>
                <el-table-column prop="type" label="类型" min-width="100"></el-table-column>
                <el-table-column prop="addTime" label="添加时间" min-width="120"></el-table-column>
                <el-table-column prop="updateTime" label="更新时间" min-width="120"></el-table-column>
            </el-table>
        </el-main>



        <el-footer>
            <div class="demo-pagination-block">
                <el-pagination
                    v-model:current-page="tableState.pageData.pageNum"
                    v-model:page-size="tableState.pageData.pageSize"
                    :page-sizes="[10, 20, 50, 100]"
                    :size="size"
                    :disabled="disabled"
                    :background="background"
                    layout="sizes, prev, pager, next"
                    :total="tableState.pageData.recordsTotal"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                />
            </div>
        </el-footer>
    </el-container>

    
</template>
<script lang="ts" setup name="User">

import { ref,reactive, onMounted } from 'vue'
import { type MyPageParamType } from '@/bean/base/page';
import type { ComponentSize,ElButton, ElDialog  } from 'element-plus';
import { MyPageData } from '@/bean/base/page';
import { ElMessage } from 'element-plus';
import { MyUserType,MyUserData } from '@/bean/base/user';
import { userListApi,addUserApi,updateUserApi,delUserApi } from '@/http/api/user/user';
import { MyArrayData } from '@/bean/base/base';
import { MyBaseType } from '@/bean/base/baseType';
import { getTypesByCodeApi } from '@/http/api/base/baseType';

const dialogFormVisible = ref(false);

const typesParam = reactive({ code:1 });
const baseTypeData = reactive(new MyArrayData<MyBaseType>());

const userData = reactive(new MyUserData);


const pageParam:MyPageParamType = reactive({
    pageNum: 1,
    pageSize: 10
})

let tableState = reactive(new MyPageData<MyUserType>());


onMounted(() => {
    getTypesByCode();
    refreshList();
})


function getTypesByCode() {
    getTypesByCodeApi(typesParam).then((res)=>{
        baseTypeData.arrayData = res.data;
    });
}

//获取页面数据
async function refreshList() {
    userListApi(pageParam).then((res)=>{
        tableState.pageData = res.data;
    });
}



function sureSubmitUser() {
    if(userData.myUserForm == null) {
        addUserApi(userData.myUserForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        })
    } else {
        updateUserApi(userData.myUserForm).then((res) => {
            if(res.code != 200) return;
            ElMessage({
                message: '操作成功',
                type: 'success',
            })
            dialogFormVisible.value = false;
            refreshList();
        })
    }
    
}




function addUser() {
    userData.myUserForm = new MyUserData().myUserForm;
    dialogFormVisible.value = true;
}

const editUser = (item:MyUserType) => {
    userData.myUserForm = item;
    dialogFormVisible.value = true;
}


const deleteUser = (id:number) => {
    delUserApi(id).then((res)=>{
        if(res.code != 200) return;
        ElMessage({
            message: '操作成功',
            type: 'success',
        })
    })
    refreshList();
}



const size = ref<ComponentSize>('default')
const background = ref(false)
const disabled = ref(false)

const refreshPageParam = (tempPaper:MyPageParamType) => {
    pageParam.pageNum = tempPaper.pageNum;
    pageParam.pageSize = tempPaper.pageSize;
    refreshList();
}
const handleSizeChange = (val: number) => {
    pageParam.pageSize = val;
    refreshList();
}
const handleCurrentChange = (val: number) => {
    pageParam.pageNum = val;
    refreshList();
}

</script>

<style scoped>


.default-table-box,.el-container {
  width: 100%;
  height: 100%;
}

.el-footer {
    height: 80px;
}
    
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

</style>